<template>
    <div class="canvasBox" :style='style' ref='canvasBox'>
        <canvas :id='id' :width='cw' :height="ch"></canvas>
    </div>
</template>
<script>
export default {
    props: {
        id: {type: String, default: 'defaultCanvas'},
        size: {type: String , default: '0'}
    },
    data: () => ({
        el: null,
        cw: 100,
        ch: 100,
    }),

    computed: {
        style() {
            if(this.size){
                return {
                    width: '100%',
                    height: isNaN(this.size) ? this.size : this.size + 'px'
                }
            }
            return {
                width: '100%',
                height: '100%'
            }
        }
    },

    created() {
    },

    mounted() {
        this.el = this.$refs.canvasBox
        this.cw = this.el.clientWidth
        this.ch = this.el.clientHeight
    }
}
</script>
<style lang="scss" scoped></style>